<template>
	<view>
		<view class="background"></view>
		<view class="section">
			<view class="countdownBorder">
				<uni-countdown class="countdown"
				:font-size="30"
				:show-day="false" 
				:show-hour="false" 
				:minute="0"
				 :second="10"
				@timeup="timeOut"/>
			</view>
			<view class="circle"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: '',
			}
		},
		methods: {
			onLoad(options){
				// 链接websocket		
				this.userInfo = uni.getStorageSync("cfuser")
				this.connect(JSON.parse(options.rescueTask))
			},
			onShow(){
				// 监听 WebSocket 消息事件
				uni.onSocketMessage((res) => {
					let data = JSON.parse(res.data)
					console.log('接收到 WebSocket 消息:', data);
					if(data != null){
						uni.redirectTo({
							url: `/packagesRescue/record/record?shopInfo=${data}`
						})
					}
				});
			},
			onUnload(){
				// 关闭websocket链接
				uni.closeSocket({
					success:(res)=>{
						console.log("关闭连接成功")
					},
					fail:()=>{
						console.log("关闭连接失败")
					}
				})
			},
		// webSocket相关方法
			connect(mess){
				console.log("111")
				console.log(this.userInfo)
				uni.connectSocket({
					url: `ws://127.0.0.1:8080/socket/websocket/user${this.userInfo.id}`,
					success:()=>{
						console.log("连接成功")
						this.sendMessage(mess)
					},
					fail:()=>{
						console.log("连接失败")
					}
				})
			},
		// 向后端发送消息
			sendMessage(mess){
				this.$request({
					url: 'socket/websocket',
					method: 'POST',
					data: mess
				})
			},
			timeOut(){
				uni.navigateBack({
					data: 1
				})
				uni.showToast({
					title: "订单超时",
					duration: 2000,
					icon: 'none'
				});
				
			},
		}
	}
</script>

<style>
	.background{
		background-color: #2979ff;
		width: 750rpx;
		height: 400rpx;
	}
	.section {
		position: absolute;
		top: 30rpx;
		width: 750rpx;
	}
	.countdown{
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 120rpx;
	}
	 /* 定义光圈样式 */
	  .circle {
	        width: 150px;
	        height: 150px;
			position: absolute;
			left: 210rpx;
	        border-radius: 50%;
	        border: 8px solid #ccc;
	        border-top-color: #007AFF;
	        animation: rotate 1s linear infinite;
	    }
	    /* 定义动画 */
	    @keyframes rotate {
	        from {
	            transform: rotate(0deg);
	        }
	        to {
	            transform: rotate(360deg);
	        }
	    }	
</style>
